<template>
  <div>
    <div class="swiper">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        height="200px"
      >
        <van-swipe-item
          v-for="(item, index) in bannerList"
          :key="index"
          @click="goDetail(item.id)"
        >
          <img
            :src="item.bannerUrl"
            alt=""
            style="width: 100%; height: 200px; object-fit: cover"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="meun-list">
      <div class="menu" @click="$router.replace('/topProduct')">
        <div class="left">
          <div class="title">优选项目</div>
          <div class="tip">安全有保障</div>
        </div>
        <img class="icon" src="../../assets/images/home/top.png" alt="" />
      </div>
      <div class="menu" @click="$router.push('/videoList')">
        <div class="left">
          <div class="title">金融学堂</div>
          <div class="tip">理财全知道</div>
        </div>
        <img class="icon" src="../../assets/images/home/study.png" alt="" />
      </div>
    </div>
    <div class="product-list">
      <div class="title-container">
        <div class="title">
          <span>好文推荐</span>
          <img src="../../assets/images/home/hot.gif" alt="" />
        </div>
        <div class="more" @click="$router.push('/article')">
          <span>更多</span>
          <van-icon name="arrow" size="14px" />
        </div>
      </div>
      <div v-for="(item, index) in list" :key="index">
        <article-item :info="item"></article-item>
      </div>
      <div class="load-more" v-if="!isEnd && !isEmpty">
        <van-button
          :loading="isLoading"
          loading-text="加载中..."
          type="default"
          @click="loadMore"
          >加载更多...</van-button
        >
      </div>
      <div class="no-data" v-if="isEnd && !isEmpty">
        <van-button plain type="default">没有更多了...</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from "vant";
import articleItem from "@/views/article/components/article-item";
import { getBanner } from "@/api/product";
import { getList } from "@/api/article";
import { searchToObj } from "@/utils/func";
import { pagination } from "@/utils/enumConfig";
export default {
  components: {
    articleItem
  },
  data() {
    return {
      pagination: this.$_.cloneDeep(pagination),
      list: [],
      bannerList: [],
      isEnd: false,
      isEmpty: false,
      isLoading: false,
    };
  },
  created() {
    let isFromSignIn = localStorage.getItem("isFromSignIn");
    if (isFromSignIn) {
      //判断是否为授权进来
      const searchObj = searchToObj(window.location.search);
      if (searchObj.code) {
        this.$router.replace("/signIn");
        localStorage.setItem("isFromSignIn", 0);
      }
    }
  },
  async mounted() {
    await this.getList(this.pagination);
    await this.getBannerList();
  },
  methods: {
    goDetail(id) {
      this.$router.push(`/productDetail/${id}`);
    },
    async loadMore() {
      let { current } = this.pagination;
      await this.getList({
        ...this.pagination,
        current: current + 1,
      });
    },
    async getList(pagination) {
      this.isLoading = true;
      let { size } = pagination;
      let list = await getList({
        isHot: 1,
        ...pagination,
      });
      if (list) {
        this.list = this.list.concat(list);
        this.pagination = pagination;
        this.isEnd = list.length < size ? true : false;
        this.isEmpty = list.length === 0 ? true : false;
      }
      this.isLoading = false;
    },
    async getBannerList() {
      let list = await getBanner();
      this.bannerList = list;
    },
  },
};
</script>

<style lang="scss">
.my-swipe .van-swipe-item {
  color: #fff;
}
.meun-list {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #ffffff;
  padding: 20px 5px;
  .menu {
    display: flex;
    align-items: center;
    // background: #EBF0F2;
    background: linear-gradient(90deg, #cf9d5c 0%, #e5be82 100%);
    padding: 10px 20px;
    .left {
      margin-right: 20px;
      .title {
        font-size: 16px;
        color: #012a36;
      }
      .tip {
        margin-top: 8px;
        font-size: 10px;
        color: #dddddd;
      }
    }
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
}
.product-list {
  padding-bottom: 20%;
  .title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    margin-top: 10px;
    padding: 10px 10px 0;
    .title {
      display: flex;
      align-items: center;
      font-size: 18px;
      color: #333333;
      font-weight: bold;

      img {
        margin-left: 10px;
        width: 19px;
        height: 23px;
      }
    }
    .more {
      font-size: 14px;
      color: #333;
      display: flex;
      align-items: center;
    }
  }
  .load-more,
  .no-data {
    width: 100%;
    button {
      width: 100%;
      color: #666;
    }
  }
}
</style>
